import React from 'react';
import order from '../../assets/css/order/order.module.css'
import {connect} from "react-redux";

class OrderIndex extends React.Component{
    goBack(){
        this.props.history.push('/')
    }
    constructor(){
        super();
        this.state={
            list:[],
            txtList:[],
            total:0
        }
    }
    componentWillMount() {
        let list=JSON.parse(localStorage.goodOne);
        this.setState({list:list},()=>{
            this.total();
            this.getData();
        })
    }
    getData(){
        let uid=localStorage.uid;
        let ress = localStorage.ress;
        fetch("http://vueshop.glbuys.com/api/user/address/index?uid="+uid+"&token=1ec949a15fb709370f")
            .then(res=>{
                return res.json()
            }).then(res=>{
            if(res.code===200){
                if (ress){
                    this.setState({txtList:res.data[ress]})
                }else {
                    this.setState({txtList:res.data[0]})
                }
            }
        })
    }
    total(){
        let list=this.state.list;
        let total=0;
        for (let i=0;i<list.length;i++){
            total+=list[i].price*list[i].amount;
        }
        this.setState({total:total.toFixed(2)})
    }
    Btn(){
        let car=JSON.parse(localStorage['goods']);
        let final= car.filter((item)=>{
            return (item.check===false)
        });
        if(final.length===0){
            localStorage.removeItem('goods')
        }else{
            localStorage['goods']=JSON.stringify(final)
        }
        if (localStorage.goods){
            this.props.dispatch({type:'cart',amount:true})
        } else {
            this.props.dispatch({type:'cart',amount:false})
        }
        let uid=localStorage.uid;
        const parmas=new URLSearchParams();
        parmas.append('uid',uid);
        parmas.append('freight',0);
        parmas.append('addsid',this.state.txtList.aid);
        parmas.append('goodsData',JSON.stringify(this.state.list));
        fetch('http://vueshop.glbuys.com/api/order/add?token=1ec949a15fb709370f',{
            method:'POST',
            body:parmas
        }).then(res=> res.json())
            .then(res=>{
                if(res.code===200){
                    this.props.history.push("/order/end");
                    localStorage.removeItem('ress')
                }
            })
    }
    res(){
        this.props.history.push('/order/addresx')
    }

    render() {
        return(
            <div className={order.boxOrder}>
                <div>
                    <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                    <span>确认订单</span>
                </div>
                <div className={order.boxDiv}>
                    <div className={order.boxList} onClick={this.res.bind(this)}>
                        <ul>
                            <li>
                                <span>收货人：{this.state.txtList.name}</span>
                                <span style={{paddingLeft:'50px'}}>{this.state.txtList.cellphone}</span>
                            </li>
                            <li>
                                <img src={require("../../assets/images/home/cart/map.png")} alt=""/>
                                <span>{this.state.txtList.province}{this.state.txtList.city}{this.state.txtList.area}{this.state.txtList.address}</span>
                            </li >
                        </ul>
                        <img src={require('../../assets/images/common/right_arrow.png')} alt=''/>
                    </div>
                    <img src={require('../../assets/images/common/xian.png')} alt=''/>
                    <ul className={order.boxUl}>
                        {this.state.list.map((item,index)=>{
                                return(
                                    <li key={index} style={{marginBottom:"20px"}}>
                                        <img src={item.images[0]} alt=''/>
                                        <div className={order.boxDivOne}>
                                            <p>{item.title}</p>
                                            {item.size.map((Item,Index)=>{
                                                return(
                                                    <span key={Index} className={order.boxValue}>{Item.value}</span>
                                                )
                                            })}
                                            <p className={order.boxValue}>&nbsp;x {item.amount}</p>
                                            <span style={{color:"#CC0004"}}>￥{item.price}</span>
                                        </div>
                                    </li>
                                )
                            })}
                    </ul>
                    <div className={order.boxActive}>
                        <p>商品总额</p>
                        <span>￥{this.state.total}</span>
                    </div>
                    <div className={order.boxActive}>
                        <p>运费</p>
                        <span>免运费</span>
                    </div>
                    <div className={order.boxActiveOne}>
                        <p>
                            实际金额：<span style={{color:'#CC0004'}}>￥{this.state.total}</span>
                        </p>
                        <button onClick={this.Btn.bind(this)}>提交订单</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect((state)=>{
    return{
        state:state
    }
})(OrderIndex)